<template>
	<view class="global">
		<view class="header">
			<view class="headtitle">
				<image @click="back" src="../../static/zjt.png" style="width: 16px;height: 22px;vertical-align: middle;" mode="">
				</image>赵奕航
			</view>
			<view class="">
				<image src="../../static/slh.png" style="width: 16px;height: 22px;" mode=""></image>
			</view>
		</view>
		<scroll-view scroll-y class="viewheight" @click="closetc"
			style="height: calc(100% - 105px);padding-top: 10px;box-sizing: border-box;">
			<view v-for="item,index in list">
				<view class="pretime" v-if="item.pretime !== ''">
					{{item.pretime}}

				</view>
				<view class="charlist" v-if="!item.isremove" :class="item.userId == 1 ? 'flexend' : 'flexstart'">


					<view class="ltnr" @longpress="long(item,index)" :class="item.userId == 1 ? 'my':'df'">
						{{item.data}}
					</view>
					<image src="../../static/ltyjt.png" v-if="item.userId == 1" mode="" style="    position: relative;
    right: 5px;width: 16px;height: 22px;    top: 8px;"></image>
					<image src="../../static/ltzjt.png" v-else mode="" style="    position: relative;
	left: 5px;width: 16px;height: 22px;    top: 8px;"></image>
					<view class="ltavator">
						<image src="../../static/avator.png" mode=""></image>
					</view>
				</view>
				<view class="chehui" v-if="item.userId == 1&&item.isremove">
					你撤回了一条消息
				</view>
				<view class="chehui" v-if="item.userId !== 1&&item.isremove">
					对方撤回了一条消息
				</view>
			</view>

		</scroll-view>
		<view class="bottominput">
			<view class="wxyy">
				<image src="../../static/wxyy.png" mode=""></image>
			</view>
			<view class="wxinput">
				<input type="text" v-model="dataa" placeholder="请输入" />
			</view>
			<view class="wxyy">
				<image src="../../static/wxbq.png" mode=""></image>
			</view>
			<view class="wxyy">
				<image src="../../static/add.png" mode=""></image>
			</view>
		</view>
		<view class="poptanchuang" v-show="extendshow1" :style="'left:'+this.x+'px;top:'+this.y+'px'">
			<view class="poplist" @click="">
				发送给朋友
			</view>
			<view class="poplist" @click="">
				收藏
			</view>
			<view class="poplist" @click="">
				删除
			</view>
			<view class="poplist" @click="chehui" v-if="userId == 1">
				撤回
			</view>
		</view>
	</view>
</template>
<style>
	.poptanchuang {
		width: 128px;
		height: auto;
		/* 		border-width: 1px;
		border-style: solid;
		border-color: #dee2e6; */
		position: fixed;
	}

	.poplist {
		width: 100%;
		height: 103rpx;
		background: #fff;
		text-align: left;
		padding-left: 15px;
		box-sizing: border-box;
		line-height: 103rpx;
		color: #000;
	}

	.uni-scroll-view {
		overflow: auto;
	}

	.pretime {
		text-align: center;
		color: #A9A5A0;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.chehui{
text-align: center;
		color: #A9A5A0;
		margin-bottom: 10px;
		font-size: 12px;
		
	}
</style>
<script>
	export default {
		data() {
			return {
				userId: "",
				pretime: "",
				x: "",
				y: "",
				proindex: "",
				extendshow1: false,
				dataa:"",
				list: [{
						userId: 1,
						text: "冷雨夜我在你身边",
						createTime: 1711010436817,
						pretime: "",
						isremove: false,

					}, {

						userId: 2,
						text: "盼望你会知",
						createTime: 1711010536817,
						pretime: "",
						isremove: false,
					},
					{

						userId: 1,
						text: "可知道我的心",
						createTime: 1711011181855,
						pretime: "",
						isremove: false,
					},

				]
			}
		},
		onLoad(e) {
console.log(e,"e");
let params=JSON.parse(e.params)
this.list=params.data
console.log(this.list);
			this.getdata()
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			closetc() {
				this.extendshow1 = false
			},
			long(item, index) {
				console.log(item, "item");
				this.userId = item.userId
				// #ifdef MP
				console.log(e.changedTouches)
				// #endif
				// #ifdef H5
				console.log(event.changedTouches)
				console.log(index)
				this.proindex = index
				this.xzid = item.id
				let x = 0;
				let y = 0;
				if (Array.isArray(event.changedTouches) || (event.changedTouches.length > 0)) {
					x = event.changedTouches[0].pageX;
					y = event.changedTouches[0].pageY;
					console.log(x, y)
					this.extendshow = true
					this.extendshow1 = true
					this.x = x;
					this.y = y


				}
				// #endif
				if (item.iszd == true) {
					this.zdtitle = "取消置顶"
				} else {
					this.zdtitle = "置顶聊天"

				}

			},
			chehui() {
				this.list[this.proindex].isremove = true;
				this.extendshow1 = false
			},
			getdata() {
				for (var i = 0; i < this.list.length; i++) {
					if (i > 0) {
						console.log((this.list[i].createTime - this.list[i - 1].createTime) / 1000);
						if ((this.list[i].createTime - this.list[i - 1].createTime) / 1000 > 300) {
							console.log(1);
							this.list[i].pretime = this.formatSendTime(this.list[i].id)
								// this.list[i].pretime = (this.list[i].createTime)
						}
					} else if (i == 0) {
						this.list[i].pretime = this.formatSendTime(this.list[i].id)
							// this.list[i].pretime = (this.list[i].createTime)

					} else {
						this.list[i].pretime = ""
					}

				}
			},
			formatSendTime(sendTime) {
				const now = new Date()
				const sendDate = new Date(sendTime)

				console.log(now, '11111', sendDate, 'shijian')
				// 计算时间差（以毫秒为单位）
				const timeDiff = now - sendDate
				// console.log(timeDiff, '时间差')
				const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
				const startOfTargetDate = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate())

				// 一天内的毫秒数
				const oneDay = 24 * 60 * 60 * 1000

				// 如果发送时间在当前时间之前
				if (timeDiff < 0) {
					return 'Invalid time' // 或者其他错误处理
				}
				// 发生在同一天
				if (startOfToday.getTime() === startOfTargetDate.getTime()) {
					return this.formatTime(sendDate)
				}
				// 如果发送时间在一天内
				if (timeDiff < oneDay) {
					return '昨天 ' + this.formatTime(sendDate)
				}

				// 如果发送时间在二天至七天内
				if (timeDiff < 7 * oneDay) {
					const weekday = this.getWeekday(sendDate)
					return weekday + ' ' + this.formatTime(sendDate)
				}

				// 如果发送时间超过七天
				return (
					sendDate.toLocaleDateString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit'
					}) +
					' ' +
					this.formatTime(sendDate)
				)
			},
			formatTime(date) {
				// 格式化时间为“时:分”
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')
				return hours + ':' + minutes
			},
			getWeekday(date) {
				// 获取星期几的中文表示
				const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				return weekdays[date.getDay()]
			},
		}
	}
</script>

<style>
	.ltavator image {
		width: 100%;
		height: 100%;
	}

	.ltavator {
		width: 37px;
		height: 37px;
		border-radius: 50%;
	}

	.flexstart {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.flexend {
		flex-direction: row;
		justify-content: flex-end;
	}

	.ltnr {
		width: auto;
		max-width: 266px;
		padding: 10px;
		border-radius: 2px;
		box-sizing: border-box;

	}

	.my {
		background: #6BEE68;
	}

	.df {
		background: #fff;
	}

	.charlist {
		width: 100%;
		height: auto;
		display: flex;
		margin-bottom: 15px;



	}

	.wxyy image {
		width: 16px;
		height: 16px;
	}

	.wxinput {
		height: 100%;

	}

	.wxinput input {
		height: 100%;
		background: #fff;
		line-height: 57px;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.viewheight {
		height: calc(100% - 105px);
		padding: 10px 20px;
		box-sizing: border-box;
		background: #f8f9fa;
	}


	.bottominput {
		width: 100%;
		height: 57px;
		background: rgb(247, 247, 246);
		position: fixed;
		bottom: 0px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		left: 0;
	}

	.global {
		width: 100%;
		height: 100%;
	}

	.header {
		width: 100%;
		height: 90rpx;
		background: #f8f9fa;
		display: flex;
		box-sizing: border-box;
		padding: 0px 20rpx;
		justify-content: space-between;
		align-items: center;

	}
</style>